<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Height - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">height</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>]
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Dimension Properties</b><br></td>
</tr>
<tr>
    <td><a href="width.htm">width</a><br>
        <a href="minwidth.htm">min-width</a><br>
        <a href="maxwidth.htm">max-width</a><br></td>
    <td><a href="lineheight.htm">line-height</a><br>
        <a href="minheight.htm">min-height</a><br>
        <a href="maxheight.htm">max-height</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">auto</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>All except inline non-replaced elements, table columns, and table
        column groups</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td><span class="tagattrib">HEIGHT</span> attribute used in tables and replaced elements.</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#height">CSS1: Sect. 5.5.24</a><br>
        <a href="http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property">CSS2: Sect. 10.5</a>,
        <a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">CSS2.1: Sect 10.5</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This property specifies the height of an element's rendering box for
        block-level and replaced elements (for other types of elements, height
        calculations are taken from their inherited or assigned 'line-height' value.)
        <br><br>

        If an element's computed height is greater than that specified by the 'height' 
        property, the content will overflow the rendering box according to
        the 'overflow' property. Negative values for the 'height' property are not allowed.
        <br><br>

        In addition to the 'height' property, two other properties - 'min-height'
        and 'max-height' - place constraints on the allowed value for an element's
        rendering box height. The 'height' value is first computed without
        consideration for these other two properties. If the computed value is
        greater than the 'max-height' value or less than the 'min-height' value,
        the height is re-calculated using the 'max-height' or 'min-height' as the
        new 'height' value.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b class="s">N6</b>|<b><i class="fs">O4</i></b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">auto</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        The height is determinant on the values of other properties.</dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to an absolute measurement for the computed element box height.
        Negative values are not allowed.</dd>

<dt><b class="subheading">[percentage]</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to a percentage of the height of the containing element block. If a
        height is not explicitly given for the containing block, it should
        be treated like 'auto'.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">img.class1</b>
        { <span class="property">height:</span> 75px;
        <span class="property">width:</span> 75px }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">img</b>
        <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">height:</span> 75px;
        <span class="property">width:</span>
        75px&quot; <span class="tagattrib">SRC</span>=&quot;image.jpg&quot;&gt;</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li><b class="alert">CSS1 Conformance:</b> Browsers may ignore this property
        (eg: treat it as if set to "auto") for non-replaced elements.
    <li>CSS2 states that the vertical dimensions for absolutely positioned elements
        should be equal to the sum of the values of these properties for the element:
        'top' + 'margin-top' + 'border-top-width' + 'padding-top' +
        'height' + 'padding-bottom' + 'border-bottom-width' +
        'margin-bottom' + 'bottom'
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
            <dd><b class="alert2">4.0:</b>
            <dd>- This property does not apply to inline elements, input
                type=checkbox|radio elements, list structures (ol, ul, dl) and
                list sub-items (li, dt, dd.)
            <dd>- This property is supported for the DIV element, but not for other
                block structures.
            <dd>- This property does not apply to input type=password|text fields
            <dd><b class="alert2">4.0+:</b>
            <dd>- If the specified height for an element is larger than necessary,
                the extra blank space will be placed at the bottom of the element. If
                it is less than the minimum height ncessary to normally render the
                element, the height property will be ignored.
            <dd>- If this property is applied to table structures, it is only applied
                if the specified height is greater than sum of the total table row
                height minimums needed for each row to render correctly. Any extra
                height is distributed evenly in the table rows.
            <dd><b class="alert2">5.0:</b>
            <dd>- This property now applies to inline elements, list structures
                (ol, ul, dl) and list sub-items (li, dt, dd.)
            <dd>- This property now applies to form password and text fields (input
                type=password|text.) The height is applied within the text box, with
                extra height added at the bottom of the box.
            <dd>- This property now applies to form checkbox and radio buttons (input
                type=checkbox|radio.) These controls have an intrinsic height, so the
                extra width is added as padding around the field.
            <dd>- Applying this property to an OL list structure turns the markers
                into bullets.
            <dd>- Applying this property to an OL list item resets the counter.
            <dd>- Applying this property to an UL/OL list structure makes the 'list-style-type'
                into "bullet", and the 'list-style-position' is set to "inside",
                not "outside."
            <dd>- This property can now be applied to text fields, but the height is
                applied <em>within</em> the form field.
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
            <dd><b class="alert2">3.5:</b>
            <dd>- This property has no effect on inline elements, form fields or tables.
            <dd>- If only one dimension is given for an image, the other dimension is
                calculated such that the image has the same height/width proportions
                as the original image.
            <dd>- If the specified height for an element is larger than necessary,
                the extra blank space will be placed at the bottom of the element.
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>